<template>
    <div class="main">
        <div class="cell">
            <van-nav-bar title="父子传参" fixed placeholder left-arrow @click-left="onClickLeft" />

            <div >父传子</div>
            <div style="margin-bottom:10px">我是父组件
                <Son :title="popTitle" :warningText="warningText" :warningSubText="warningSubText" :showProps="true"/>
            </div>

            <div>子传父：</div>
            <div style="margin-bottom:10px">我是父组件
                <div>
                    子组件修改父组件内容count:{{ count }}
                </div>
                <Son ref="sonRef2" @addCount="addCount" :showAdd="true" />
            </div>

            <div>父调用子组件方法</div>
            <div style="margin-bottom:10px">
                我是父组件
                <div>
                    <van-button type="primary" size="mini" @click="openToast">click me</van-button>
                </div>
                <Son ref="sonRef" />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
//组件使用必须使用大驼峰写法，不然热更新会识别不了
import Son from "../components/son.vue"
const count = ref(0);
const popTitle = ref('标题');
const warningText = ref('警告语')
const warningSubText = ref('警告副语')
//获取dom节点方法 ref
const sonRef = ref<any>(null)

const addCount = () => {
    count.value++
}
const onClickLeft = () => history.back();
const openToast=()=>{
    sonRef.value.open()
}

</script>

<style scoped lang="scss">
.main {
    background: #f7f8fa;
    min-height: 100vh;

    .cell {
        margin: 10px 0px;
    }
}
</style>